<template>
	<a-modal title="Title" @ok="handleOk" @cancle="handleCancel">
		<template #footer>
			<a-button key="back" @click="handleCancel">取消</a-button>
			<a-button key="submit" :loading="loading" type="primary" @click="handleOk">确认</a-button>
		</template>
		<slot>
			<a-form :label-col="labelCol" :model="BookmarksClass">
				<a-form-item label="分类名称">
					<a-input v-model:value="BookmarksClass.title" />
				</a-form-item>
				<a-form-item label="上级分类">
					<a-tree-select v-model:value="BookmarksClass.pid" style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeLocData"
						placeholder="顶级分类" tree-default-expand-all :replaceFields="{key:'cid', value: 'cid'}">
					</a-tree-select>
				</a-form-item>
			</a-form>
		</slot>
	</a-modal>
</template>

<script>
	import {
		mapGetters
	} from "vuex"

	export default {
		name: 'BookmarksClassEdit',
		props: {
			editBookmarksCategory: Object
		},
		data() {
			return {
				treeLocData: [],
				BookmarksClass: {},
				labelCol: {
					span: 4,
				},
				visible: false,
				loading: false
			}
		},
		computed: {
			...mapGetters(['treeData'])
		},
		watch: {
			editBookmarksCategory: {
				handler() {
					this.BookmarksClass = {
						...this.editBookmarksCategory
					};
					this.treeLocData = [{
						cid: 0,
						title: "顶级分类",
						pid: 0
					}, ...this.treeData];
				},
				deep: true
			}
		},
		methods: {
			closeModal() {
				this.$emit('onClose', this.visible)
			},
			handleOk() {
				if(this.BookmarksClass.children){
					delete this.BookmarksClass.children
				}
				this.$emit('onSubmit', this.BookmarksClass)
				this.closeModal()
			},
			handleCancel() {
				this.closeModal()
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	h3 {
		margin: 40px auto 0;
		text-align: center;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
